<script lang="ts" setup>
// !axios 与 ts 如何配合使用
import axios from 'axios'
import { ref } from 'vue';
import { TResponse, TChannels, TChannel } from '../types/data'
import userChannelStore from '../store/channel'
// !#1
import { storeToRefs } from 'pinia';
// !#2
const channelStore = userChannelStore()
// !#3
const { channelId } = storeToRefs(channelStore)
// !#4
const { changeChannelId } = channelStore

const channels = ref<TChannel[]>([])

const getChannelList = async () => {
  const r = await axios.get<TResponse<TChannels>>('http://geek.itheima.net/v1_0/channels')
  // r.data.
  const resChannels = r.data.data.channels
  channels.value = resChannels

  // !#5 更新 Pinia 中的
  changeChannelId(resChannels[0].id)
}

getChannelList()
</script>

<template>
  <ul class="catagtory">
    <!-- //!#6 改仓库中的 channelId -->
    <li @click="channelStore.changeChannelId(item.id)" v-for="item in channels" :key="item.id" :class="{
      select: channelId === item.id
    }">{{item.name}}</li>
  </ul>
</template>

<style scoed lang="less"></style>
